<template>
    <main class="main">
        <cyj-header></cyj-header>
        <ul class="main-ul" v-for="(item,index) in content">
            <li @click="goDetail(item.e_id)" class="main-ul-li">{{index+1}}. {{ item.title }}<span class="main-ul-li-span">{{ item.date }}</span></li>
        </ul>
        <cyj-footer @findNewList="findNewList"></cyj-footer>
    </main>
</template>
<script>
import Axios from 'axios'
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import router from "@/router";
import Detail from "@/views/Detail";
export default {
    name: "Main",
    created() {
        this.init();
    },
    data() {
        return {
            content: [],
            date: '',
        }
    },
    methods: {
        init() {
            const localContent = localStorage.getItem("list");
            this.content = JSON.parse(localContent);
        },
        findNewList(data){
            alert(data)
            Axios.get('/test/queryEvent.php', {
                params:{
                    key: 'd2ecd8fff4c696b09c5d897091fbc616',
                    date : data,
                }
            }).then(res => {
                console.log(res)
                if (res.data.error_code === 0) {
                    this.content = res.data.result;
                    localStorage.setItem('list', JSON.stringify(this.content));
                } else {
                    console.log('请求失败' + res.data.reason);
                }
            })
        },
        goDetail(eid){
            router.push({
                name : 'Detail',
                params : {
                    eid
                }
            })
        }
    },
    components : {
        'cyj-header' : Header,
        'cyj-footer' : Footer,
    }
}
</script>

<style scoped>
.main {
    margin: 20% 0;
    font-size: 13px;
}

.main-ul {
    user-select: none;
    margin: 0;
    padding: 0;
}

.main-ul-li {
    margin-bottom: 5%;
    border-bottom: #b6b6b6 solid 1px;
    list-style-type: none;
}
.main-ul-li:hover{
    background-color: #b6b6b6;
    cursor: pointer;
}

.main-ul-li-span {
    float: right;
}
</style>